<template xmlns:el-table="http://www.w3.org/1999/html">
  <el-container class="container" style="height: 100%; ">
    <el-header class="header">
      <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #CCC; display: flex">
        <div style="width: 200px;padding-left: 30px;font-weight: bold;color: deepskyblue">用户界面</div>
        <div style="flex: 1"></div>
        <div style="width: 100px"></div>
        {{ user }}
      </div>
    </el-header>
    <el-container style="min-height: 100vh">
      <el-aside class="aside" style="min-height: 100vh;width: 200px;">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          style="min-height: 100vh"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户功能</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="CheckOrChange()">UDP报文抓取</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <el-table :data="tableData" @row-dblclick="digClick">
          <el-table-column prop="seq" label="Seq" width="100">
          </el-table-column>
          <el-table-column prop="name" label="Name" width="800">
          </el-table-column>
          <el-table-column prop="description" label="Describe">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-dialog title="UDP报文发送" :visible.sync="dialogFormVisible">
      <el-input style="margin: 10px" v-model="form.destination" autocomplete="off"
                placeholder="Destination IP"></el-input>
      <el-input style="margin: 10px" v-model="form.port" autocomplete="off"
                placeholder="Port"></el-input>
      <el-select class="m-2" placeholder="选择发送的文件类型" size="large" v-model="type" @change="selectChanged()">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          v-bind:value="item.value"
        />
      </el-select>
      <el-input style="margin: 10px" v-model="text" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                placeholder="content" v-if="textVisible"></el-input>
      <el-upload
        class="upload-demo"
        :auto-upload="false"
        :on-change="getfile"
        drag
        action="#"
        multiple
        v-if="fileVisible"
      >
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">
          请拖拽文件到此处 <em>上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            请上传小于10MB的文件
          </div>
        </template>
      </el-upload>
      <template #footer>
<span class="dialog-footer">
  <el-button @click="dialogFormVisible = false">Cancel</el-button>
  <el-button type="primary" @click="sendinfo()"
  >Send</el-button>
</span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script>
  import axios from 'axios'

  export default {
    mounted() {
      this.filter()
    },
    data() {
      return {
        input: "",
        diaUDPVisible: false,
        tableData: [],
        dialogFormVisible: false,
        user: sessionStorage.getItem('userid'),
        gridData: [],
        tablemember: [],
        activeNames: '',
        form: {
          destination: '',
        },
        textVisible: false,
        fileVisible: false,
        text: '',
        file: '',
        form: {
          destination: '',
          content: '',
          port: '',
        },
        type: 1,
        options: [
          {
            value: 1,
            label: '选择发送的文件类型',
          },
          {
            value: 2,
            label: '文本信息',
          },
          {
            value: 3,
            label: '文件',
          },
        ],
        test: [
          {
            teacherid: '2016-05-03',
            userid: 'Tom',
            tname: 'California',
            tphone: 'Los Angeles',
          },
        ],
      }
    },

    name: "Home",
    methods: {
      digClick(row) {
        console.log(row)
        this.$router.push({
          path: '/udp',
          query: {
            name: row.name,
            seq: row.seq
          }
        })
      },
      send() {
        this.dialogFormVisible = true
      },
      filter() {
        this.$http.post("cp/devices",
        ).then((response) => {
          console.log(response);
          this.tableData = response.data
        })
      },
      changePwd() {
        var me = this;
        // print()
        me.$router.push({
          path: '/changePassword',
          query: {usersid: sessionStorage.getItem('userid')}
        })
      },
      showClass() {
        var me = this;
        // print()
        me.$router.push({
          path: '/admin-class'
        })
      },
      //查看/编辑
      CheckOrChange() {
        var me = this;
        // print()
        me.$router.push({
          path: '/user',
          // query:{usersid:this.usersid}
        })
      },
      getfile(file) {
        console.log(file);
        var reader = new FileReader();
        reader.readAsDataURL(file.raw); // 一定要传入file格式
        reader.onload = () => {
          // console.log("file 转 base64结果：" + reader.result);
          this.file = reader.result
          // console.log(this.file)
        };
        reader.onerror = function (error) {
          console.log("Error: ", error);
        };
      },
      selectChanged() {
        // console.log(this.type)
        if (this.type === 1) {
          this.textVisible = false
          this.fileVisible = false
        } else if (this.type === 2) {
          this.textVisible = true
          this.fileVisible = false
        } else if (this.type === 3) {
          this.textVisible = false
          this.fileVisible = true
        }
      },
      sendinfo() {
        // console.log(this.type)
        if (this.type === 2) {
          this.form.content = this.text
          // console.log(this.form.content)
        } else if (this.type === 3) {
          this.form.content = this.file
          // console.log(this.form.content)
        } else {
          this.$message.error('请选择发送的文件类型！');
        }
        console.log(this.form)
        this.dialogFormVisible = false
        this.$http({
          url: "cp/send",
          params: {
            address: this.form.destination,
            port: this.form.port,
            content: this.form.content,
          },
          method: "post"
        })
      },
    },
  }
</script>
<style scoped>
  .container {
    height: 100%;
    font-size: 15px;
  }

  .main_header {
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
  }

</style>
